<template>
  <category v-if="homeGameData.length && !hasNext" :from="'gameDetail'" :agent_id="agentId" :name="nameS"
    :venue_id="venueId" :has_next="hasNext" />

  <div class="third-level" v-if="homeGameData.length && hasNext">
    <div class="level-box">
      <div class="level-item" v-for="(v, i) in thirdData" :key="i">
        <GameItem :item="v" :size="2"></GameItem>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import category from "../category/index.vue"
import { useRoute } from "vue-router";
import { ref, computed } from "vue"
import pinia from "@/store/index";
import { storeToRefs } from "pinia";
import { Page } from "@/store/page";

const page = Page(pinia);
const { homeGameData } = storeToRefs(page);
const route = useRoute();
const { agent_id, paneKey, venue_id, has_next, name } = route.query;

const agentId: any = ref(agent_id || paneKey)
const venueId: any = ref(venue_id)
const hasNext: any = ref(has_next)
const nameS: any = ref(name)


const thirdData = computed(() => {
  const p = homeGameData.value.find((plat: any) => plat.id == Number(venueId.value))
  if (p) {
    const c = p.three_platform.find((cc: any) => cc.id == Number(agentId.value))
    if (c) {
      const arr: any = []
      c.three_game_kind.forEach((a: any) => {
        arr.push(...a.three_game)
      })
      return arr
    }
  }
  return []
})
</script>

<style lang="scss" scoped>
.third-level {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 75px;

  .level-box {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    .level-item {
      margin: 0 8px 10px 0;
      position: relative;

      &:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}
</style>